<template>
  <div class="app-container" v-loading="tableLoading">
    <!-- 基础信息 -->
    <h5 class="titleInfo">用户信息</h5>
    <el-form class="form" ref="form"  label-width="130px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名">
            <span class="spanToInput">{{list.name }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <span class="spanToInput">{{list.mobile }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="想变美部位">
            <span class="spanToInput">{{list.beauty_place}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="答题情况">
            <span class="spanToInput">{{list.status| filterOption}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="参与答题数">
            <span class="spanToInput">{{list.answer_number }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="答对题目数">
            <span class="spanToInput">{{list.correct_number }}</span>
          </el-form-item>
        </el-col>
        <!-- {{list.type}} -->
        <el-col :span="12">
          <el-form-item label="开始答题时间">
            <span class="spanToInput">{{list.created_at }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="提交答题时间">
            <span class="spanToInput">{{list.ended_at }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 推荐人信息 -->
      <div class="divBar"></div>
      <h5 class="titleInfo">获奖情况</h5>

      <el-row>
        <el-col :span="24">
          <el-form-item>
            <p v-if="reward_detail.length==0|list.status==0">
              <span class="blue">未获奖</span>
            </p>
            <p v-else>
              <span class="blue">获奖</span> ，获得
              <span
                class="blue"
                v-for="item in reward_detail"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >{{item.item+"、"}}</span>
              <span>{{reward_detail.length}}个奖品</span>
            </p>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 实名认证信息 -->
      <div class="divBar"></div>
      <h5 class="titleInfo">答题信息</h5>
      <div class="table" v-loading="tableLoading">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          border
        >
          <!-- <el-table-column fixed type="index" label="编号" width="55"></el-table-column> -->
          <el-table-column prop="id" align="center" label="题号"></el-table-column>
          <el-table-column prop="title" align="center" label="题目"></el-table-column>
          <el-table-column prop="correct_answer" align="center" label="正确答案"></el-table-column>
          <el-table-column prop="user_choose" align="center" label="所选答案"></el-table-column>
          <el-table-column prop="result" align="center" label="结果"></el-table-column>
        </el-table>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getDetail } from "@/api/answerManageIndex";
export default {
  name: "answerManageDetail",
  data() {
    return {
      tableLoading: false,
      form: { id: "" },
      tableData: [],
      list: {},
      reward_detail: [],
      //获奖礼包
      StatusOption: [
        { id: "", name: "全部" },
        { id: "0", name: "未完成" },
        { id: "1", name: "已完成" }
      ]
    };
  },
  created() {
    // this.form = JSON.parse(this.$route.query.userId);
    // this.userId = this.form.userId;
  },
  mounted() {
    this.form.id = this.$route.query.id;
    this.getInfo();
  },
  methods: {
    getInfo() {
      this.tableLoading = true;
      const datas = { id: this.form.id };
      getDetail(datas).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.list = res.data.data;
          res.data.data.reward_detail.forEach(item => {
            // console.log(item)
            this.reward_detail.push({
              item
            });
          });
          // this.reward_detail = res.data.data.reward_detail;
          // console.log(this.reward_detail);
          this.tableData = res.data.data.setting;
          //   console.log(this.list);
          this.tableLoading = false;
        }
      });
    }
  },
  filters: {
    filterNull(e) {
      if (!e) {
        return "暂无";
      } else {
        return e;
      }
    },
    //	答题情况 0 未完成 1完成
    filterOption(e) {
      switch (e) {
        case 0:
          return "未完成";
          break;
        case 1:
          return "完成";
          break;
        default:
          return "暂无";
          break;
      }
    },
    cardNull(e) {
      return window.helper.cardType(String(e));
    },
    accountType(e) {
      return window.helper.accountType(String(e));
    },
    roleFn(e) {
      return window.helper.roleFn(String(e));
    }
  }
};
</script>
<style scoped>
.app-container {
  /* padding: 0px !important; */
}
.blue {
  color: blue;
}
</style>
